<template>
  <div class="card">
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card>
          <Detail title="总销售额" contain="￥ 126560">
            <template slot="charts">
              <span>周同比</span>&nbsp;
              <span>56.67%</span>&nbsp;
              <svg t="1648202789158" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3213" width="16" height="16"><path d="M384 512H128V384l384-384 384 384v128h-256v512H384V512z" fill="#1afa29" p-id="3214" /></svg>&nbsp;&nbsp;
              <span>日同比</span>&nbsp;&nbsp;
              <span>19.16%</span>&nbsp;
              <svg t="1648202767672" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2903" width="16" height="16"><path d="M640 512h256v128l-384 384-384-384V512h256V0h256v512z" fill="#d81e06" p-id="2904" /></svg>
            </template>
            <template slot="footer">
              <span>日销售额</span>
              <span>￥ 12423</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="访问量" contain="88460">
            <template slot="charts">
              <LineCharts />
            </template>
            <template slot="footer">
              <span>日访问量</span>
              <span>1423</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="支付笔数" contain="86222">
            <template slot="charts">
              <BarCharts />
            </template>
            <template slot="footer">
              <span>转化率</span>
              <span>65%</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="运营活动效果" contain="78%">
            <template slot="charts">
              <ProgressCharts />
            </template>
            <template slot="footer">
              <span>周同比</span>&nbsp;
              <span>56.67%</span>&nbsp;
              <svg t="1648202789158" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3213" width="16" height="16"><path d="M384 512H128V384l384-384 384 384v128h-256v512H384V512z" fill="#1afa29" p-id="3214" /></svg>&nbsp;&nbsp;
              <span>日同比</span>&nbsp;&nbsp;
              <span>19.16%</span>&nbsp;
              <svg t="1648202767672" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2903" width="16" height="16"><path d="M640 512h256v128l-384 384-384-384V512h256V0h256v512z" fill="#d81e06" p-id="2904" /></svg>
            </template>
          </Detail>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Detail from './Detail/Detail.vue'
import LineCharts from './Detail/LineCharts/index.vue'
import BarCharts from './Detail/BarCharts/index.vue'
import ProgressCharts from './Detail/ProgressCharts/index.vue'
export default {
  name: 'Card',
  components: {
    Detail, LineCharts, BarCharts, ProgressCharts
  }
}
</script>

<style  scoped>
.card {
  width: 100%;
}
</style>
